<template>
    <div class="bigDiv">
        <div class="leftDiv">
             <div class="leftTop">
                <div><span style="font-size:1.1rem;">指标分类</span></div>
                <div><a style="color:blue;cursor:pointer;font-size:1.1rem;"  @click="dialogIndexClassFormVisible = true">+ 新增</a></div>
            </div>
            <div class="leftDown">
                <ul>
                    <li v-for="(item,index) in IndexClassData" :key="index" @click="GetIndexCladdId(item.indexClass_Id)" :class="{active: item.isActive}">{{ item.indexClass_Name }}</li>
                </ul>
            </div>
        </div>
        <div class="rightDiv">
              <div class="rightTop">
                <div><span style="font-size:1.1rem;">指标定义</span></div>
                <div><el-button type="primary" @click="ButtonAlert()">+ 新增</el-button></div>
              </div>
              <div class="rightDown">
                    <el-table :data="IndexDefineData" style="width: 100%">
                        <el-table-column prop="indexDefine_Name" label="指标名称" />
                        <el-table-column prop="indexDefine_Code" label="指标编码" />
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button size="small" @click="handleEdit(scope.row.indexDefine_Id, scope.row)">
                                编辑
                                </el-button>
                                <el-button
                                size="small"
                                type="danger"
                                @click="handleDelete(scope.row.indexDefine_Id, scope.row)"
                                >
                                删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

              </div>
        </div>
        <!-- 指标定义添加/编辑弹出框 -->
        <el-dialog v-model="dialogIndexDefineFormVisible" title="指标定义编辑" width="500" @close="handleDialogClose">
            <el-form :model="indexDefineForm">
                   <el-form-item label="名称" :label-width="formLabelWidth">
                      <el-input v-model="indexDefineForm.indexDefine_Name" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="创建人" :label-width="formLabelWidth" v-show="indexDefineForm.indexDefine_Id == 0">
                      <el-input v-model="indexDefineForm.createUser" autocomplete="off"  disabled />
                    </el-form-item>
                    <el-form-item label="创建时间" :label-width="formLabelWidth" v-show="indexDefineForm.indexDefine_Id == 0">
                      <el-date-picker
                        v-model="indexDefineForm.createTime"
                        type="datetime"
                        :size="large"
                        disabled
                     />
                    </el-form-item>
                     <el-form-item label="修改人" :label-width="formLabelWidth" v-show="indexDefineForm.indexDefine_Id != 0">
                      <el-input v-model="indexDefineForm.updateUser" autocomplete="off"  disabled />
                    </el-form-item>
                    <el-form-item label="修改时间" :label-width="formLabelWidth" v-show="indexDefineForm.indexDefine_Id != 0">
                      <el-date-picker
                        v-model="indexDefineForm.updateTime"
                        type="datetime"
                        :size="large"
                        disabled
                     />
                    </el-form-item>
            </el-form>
            <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="CancelDefineSave()">取消</el-button>
                        <el-button type="primary" @click="SaveIndexDefine()">保存</el-button>
                    </div>
            </template>
        </el-dialog>  
        <!-- 指标分类添加弹出框 -->
        <el-dialog v-model="dialogIndexClassFormVisible" title="指标分类添加" width="500">
            <el-form :model="indexClassForm">
                    <el-form-item label="名称" :label-width="formLabelWidth">
                         <el-input v-model="indexClassForm.indexClass_Name" autocomplete="off" />
                     </el-form-item>
                    <el-form-item label="创建人" :label-width="formLabelWidth">
                        <el-input v-model="indexClassForm.createUser" autocomplete="off"  disabled />
                    </el-form-item>
                    <el-form-item label="创建时间" :label-width="formLabelWidth">
                        <el-date-picker
                            v-model="indexClassForm.createTime"
                             type="datetime"
                             :size="large"
                             disabled
                        />
                    </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogIndexClassFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="SaveIndexClass()">保存</el-button>
                </div>
            </template>
        </el-dialog> 
    </div>
</template>
<script lang="ts" setup>
import axios from 'axios';
import { onMounted, reactive, ref,watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
import { useCounterStore } from '@/stores/counter';
const apiUrl = import.meta.env.VITE_APP_API_URL;
const store = useCounterStore();
const router = useRouter();
const IndexDefineData = ref([]);
const IndexClassData = ref([]);
const IndexChaParam:any = reactive({IndexClass_Id:null});
const dialogIndexClassFormVisible = ref(false);
const dialogIndexDefineFormVisible = ref(false);
const formLabelWidth = '140px'
const indexClassForm = reactive({
    indexClass_Id:0,
    indexClass_Name:'',
    createUser:'',
    createTime:new Date(),
    updateUser:'',
    updateTime:new Date(),
})
const indexDefineForm = reactive({
    indexDefine_Id:0,
    indexClass_Id:0,
    indexDefine_Code:0,
    indexDefine_Name:'',
    createUser:'',
    createTime:new Date(),
    updateUser:'',
    updateTime:new Date()
})
const ButtonAlert = ()=>{
  if(indexDefineForm.indexClass_Id == 0 ){
    ElMessage.error("请选择指标分类");
  }
  else{
    dialogIndexDefineFormVisible.value = true;
  }
}

//指标定义添加事件
const SaveIndexDefine = ()=>{
    indexDefineForm.updateUser = indexClassForm.createUser;
    const params = {...indexDefineForm};
    axios.post(apiUrl+'/T8/BasicSettings/AddIndexDefine',params).then(res=>{
        if(res.data.code == 212){
            indexDefineForm.indexDefine_Id = 0;
            indexDefineForm.indexDefine_Name = '';
            ElMessage.success(res.data.msg);
            dialogIndexDefineFormVisible.value = false;
            getIndexDefine();
        }  
        else if(res.data.code == 206){
           indexDefineForm.indexDefine_Id = 0;
            indexDefineForm.indexDefine_Name = '';
            ElMessage.success(res.data.msg);
            dialogIndexDefineFormVisible.value = false;
            getIndexDefine();
        }
        else{
            ElMessage.error(res.data.msg);
        }
    })
}
const handleDialogClose = () => {
  // 重置表单数据
  Object.assign(indexDefineForm, {
    indexDefine_Id: 0,
    indexClass_Id: IndexChaParam.IndexClass_Id, // 保留当前分类ID
    indexDefine_Code: 0,
    indexDefine_Name: '',
    createUser: store.ccstore.userName, // 保留创建人
    createTime: new Date(),
    updateUser: '',
    updateTime: new Date()
  });
}
const CancelDefineSave = ()=>{
    indexDefineForm.indexDefine_Id = 0;
    indexDefineForm.indexDefine_Name = '';
    dialogIndexDefineFormVisible.value = false;
}
//指标分类添加事件
const SaveIndexClass = ()=>{
    indexClassForm.updateUser = indexClassForm.createUser;
    const params = {...indexClassForm};
    axios.post(apiUrl + '/T8/BasicSettings/AddIndexClass',params).then(res=>{
        if(res.data.code == 212){
            indexClassForm.indexClass_Name = '';
            ElMessage.success(res.data.msg);
            dialogIndexClassFormVisible.value = false;
            getIndexClass();
            
        }
        else{
            ElMessage.error(res.data.msg);
        }
    })
}
const getIndexClass = ()=>{
    axios.get(apiUrl +'/T7/BasicSettings/GetIndexClass').then(res=>{
                console.log("查看指标分类数据集合", res.data.data);

        IndexClassData.value = res.data.data.map(item => ({...item, isActive: false }));
    })
}
const GetIndexCladdId = (id:any) => {
     IndexClassData.value.forEach(item => item.isActive = false);
    const targetItem = IndexClassData.value.find(item => item.indexClass_Id === id);
    if (targetItem) {
        targetItem.isActive = true;
    }
    IndexChaParam.IndexClass_Id = id;
    indexDefineForm.indexClass_Id = id;
    getIndexDefine();
};
const getIndexDefine = ()=>{
    // const params = {IndexClass_Id:IndexChaParam.IndexClass_Id};
    // axios.get('http://localhost:5223/api/BasicSettings/GetIndexDefine',params).then(res=>{
    //     IndexDefineData.value = res.data.data
    //     console.log("查看指标定义数据集合",res.data.data);
    // })
    axios.get(apiUrl +'/T7/BasicSettings/GetIndexDefine',{
      params:{
          IndexClass_Id:IndexChaParam.IndexClass_Id,
      }
    }).then(res=>{
        IndexDefineData.value = res.data.data
        console.log("查看指标定义数据集合",res.data.data);
    })
}

const handleEdit = (index, row) => {
  dialogIndexDefineFormVisible.value = true;
  indexDefineForm.indexDefine_Id = row.indexDefine_Id;
  indexDefineForm.indexDefine_Name = row.indexDefine_Name;
  indexDefineForm.indexClass_Id = row.indexClass_Id;
  indexDefineForm.indexDefine_Code = row.indexDefine_Code;
  indexDefineForm.createUser = row.createUser;
  indexDefineForm.createTime = row.createTime;
  indexDefineForm.updateUser = store.ccstore.userName;
  indexDefineForm.updateTime = new Date();
}
const handleDelete = (index, row) => {
   ElMessageBox.confirm(
    '确认删除这一条数据嘛?',
    '警告!警告!',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.post(apiUrl +"/T8/BasicSettings/DelIndexDefine", { indexDefine_Id: row.indexDefine_Id }).then(res => {
      if (res.data.code === 204) {
        ElMessage({
        type: 'success',
        message: '恭喜你删除成功!',
      })
        getIndexDefine();
      } else {
        ElMessage({
        type: 'error',
        message: '很抱歉，删除失败!',
      })
      }
    })
    
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: '取消成功！',
      })
    })

}

onMounted(()=>{
    getIndexDefine();
    getIndexClass();
    indexClassForm.createUser = store.ccstore.userName;
    indexDefineForm.createUser = store.ccstore.userName;
})
</script>
<style scoped>
 .bigDiv{width:100%;height:100%;margin:0;display: flex;} 
 .leftDiv{display:flex;flex:3;padding:1%;background-color: #fff;margin-right:1%;flex-direction: column;min-width: 223px;}
 .rightDiv{display:flex;flex:7;padding:1%;background-color: #fff;flex-direction: column;}
 .leftTop{display:flex;align-items:center;justify-content: space-between;}
 .rightTop{display:flex;align-items:center;justify-content: space-between;}
 .leftDown{}
 .leftDown ul {padding-right: 1vw;}
 .leftDown ul li{list-style: none;padding: 0 2vw;height:7vh;line-height:7vh;cursor:pointer;font-size:1.2rem;}
 .leftDown ul li:hover{background: rgba(240, 249, 255, 1);border-bottom: 2px solid #FFE500;}
 .leftDown ul .active{background: rgba(240, 249, 255, 1);border-bottom: 2px solid #FFE500;}
 .rightDown{}
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>